<template>
	<view class="index-goods">
		
		<view class="titleViewHint">为你推荐</view>
		
		<view class="sepLeft">
			
			
			<view class="goodBox" :style="{'margin-top': index==0?'0upx':''}"  v-if="index%2==0" v-for="(item,index) in jdata.params.list" :key="item.id" @click="goodsDetail(item.id)">
				
				
<!-- 				<image class="hotImageicon" v-if="index==0" src="/static/image/my/homegoodWaterflow.png" 
				mode="aspectFill" ></image> -->
				
				
				<image class="goodImage":src="item.image_url" mode='aspectFill'></image>
				
				<view class="goodname">
					{{item.name}}
				</view>
				
				<view class="hintView">
				
					<view class="goods-priceview">￥{{item.price}}</view>
				
					<view class="goods-PV">{{item.product.pv}}积分</view>
								
				
				</view>
			</view>
			
			
			
		</view>
		
		
		
		
		<view class="sepLeft">
			
			
			<view class="goodBox" style="margin-left: 13upx;" :style="{'margin-top': index==1?'0upx':''}" v-if="index%2==1" v-for="(item,index) in jdata.params.list" :key="item.id" @click="goodsDetail(item.id)">
				
				
	<!-- 			<image class="hotImageicon" v-if="index==0" src="/static/image/my/homegoodWaterflow.png" 
				mode="aspectFill" ></image> -->
				
				
				<image class="goodImage":src="item.image_url" mode='aspectFill'></image>
				
				<view class="goodname">
					{{item.name}}
				</view>
				
				<view class="hintView">
				
					<view class="goods-priceview">￥{{item.price}}</view>
				
					<view class="goods-PV">{{item.product.pv}}积分</view>
								
				
				</view>
			</view>
			
			
			
		</view>
		
		
		
		
	
	
	</view>
</template>

<script>
import {goods} from '@/config/mixins.js'
export default {
	filters:{
		substr(val) {
			if (val.length == 0 || val == undefined) {
				return false;
			} else if (val.length > 13) {
				return val.substring(0, 13) + "...";
			} else {
				return val;
			}
		}
	},
	mixins: [goods],
	name: "jshopgoods",
	props: {
		jdata:{
			// type: Array,
			required: true,
		}
	},
	computed: {
		count() {  
			return (this.jdata.params.list.length > 0)
		}
	},
	methods: {
		//跳转到商品详情页面
		goodsDetail: function(id) {
			
			
			let url = '/pages/goods/index/index?id=' + id;
			

			
			this.$common.navigateTo(url);
		},
		
	},
}
</script>

<style>
	
	
	
	.titleViewHint{
		
	width: 100%;
	
	/* text-align: center; */
	
	margin-left: 37upx;
	
	height: 134upx;
	
	line-height: 134upx;
	
	font-weight: bold;
	
	font-size: 34upx;
	
	/* margin-left: 40upx; */
	
	color: #000000;
		
		/* background-color: #FFFFFF; */
		
		
	}
	
.index-goods{
	
	width: 100%;
	
	display: flex;

	flex-direction: row;
	
	flex-wrap: wrap;
	

	
}


.sepLeft{
	width: 50%;
	
	/* background-color: #007AFF; */
	
}


.goodBox{
	
	width: 326upx;
	
	margin-left: 36upx;
	
	margin-top: 36upx;
	
	background-color: #FFFFFF;
	
	/* background-color: #007AFF; */
	
	border-radius: 30upx;
	
	overflow: hidden;
	
}
	
	
.hotImageicon{
	
	
	margin-top: 20upx;
	
	margin-left: 38upx;
	
	width: 250upx;
	
	height: 76upx;
	
	/* background-color: #000000; */
	
	
}

.goodImage{
	
	margin-top: 0upx;
	
	width: 326upx;
		
	height: 326upx;
	
	
}

.goodname{
	
	margin-top: 30upx;
	
	width: 90%;
	
	margin-left: 5%;
	
	color: #101010;
	
	overflow: hidden;
	-webkit-line-clamp: 2;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	
	/* text-align: center; */
	
}


.hintView{
	
	width: 100%;
	
	height: 92upx;
	
	/* background-color: #007AFF; */
	
	display: flex;

	flex-direction: row;
	
	margin-top: 20upx;
	
	margin-bottom: 20upx;
	
}

.goods-priceview{
	
	line-height: 52upx;
	
	color: #101010;
	
	margin-left: 20upx;
	
	font-size: 36upx;
	
	font-weight: bold;
	
	
}

.goods-PV{
	
	padding-left: 10upx;
	
	padding-right: 10upx;
	
	margin-left: 30upx;
	margin-top: 15upx;
	/* width: 96upx; */
	height: 24upx;
	line-height: 24upx;
	border-radius: 8px;
	background-color: #FF5A5F;
	color: rgba(255, 255, 255, 100);
	font-size: 18upx;
	text-align: center;

	
	
}
	
</style>
